
<template>
  <div class="app-container operDocterAdmin">
    <!-- 顶部按钮 -->
    <div class="flexLeft">
      <div style="padding: 0 10px 0 0">
        <el-button
          type="primary"
          round
          @click="disDialog(0)"
        >新增医生</el-button>
      </div>
      <div>
        <el-button
          type="primary"
          round
          @click="disDialog(1)"
        >编辑医生</el-button>
      </div>
      <div>
        <el-button
          type="primary"
          round
          @click="disDialog(2)"
        >规则配置</el-button>
      </div>
      <div>
        <el-button
          type="primary"
          round
          @click="disDialog(3)"
        >重置密码</el-button>
      </div>
      <div>
        <el-button
          type="primary"
          round
          @click="disDialog(4)"
        >导出医生</el-button>
      </div>
      <div>
        <el-button
          type="primary"
          round
          @click="disDialog(5)"
        >设置标签</el-button>
      </div>
      <div>
        <el-button
          style="background: #d8e4f6; color: #508fcc; border: none"
          round
          @click="disDialog(6)"
        >删除医生</el-button>
      </div>
    </div>
    <!-- 搜索表单 -->
    <div class="flexSpace" style="align-items: flex-start">
      <div>
        <div class="flexLeft">
          <div>
            <el-input
              v-model="filterDoctor.doctorName"
              placeholder="医生姓名"
              suffix-icon="el-icon-search"
            >
            </el-input>
          </div>
          <div>
            <el-select v-model="filterDoctor.gender" placeholder="医生性别">
              <el-option
                v-for="item in genderList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div>
            <el-input
              v-model="filterDoctor.typeCode"
              placeholder="医生职称"
              suffix-icon="el-icon-search"
            >
            </el-input>
          </div>
          <div>
            <el-select v-model="filterDoctor.level" placeholder="罗慕认证">
              <el-option
                v-for="item in luomu_leavel"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div>
            <el-date-picker v-model="value1" type="date" placeholder="创建日期">
            </el-date-picker>
          </div>
          <div>
            <el-input
              v-model="input1"
              placeholder="手机号码"
              suffix-icon="el-icon-search"
            >
            </el-input>
          </div>
        </div>
        <div class="flexLeft">
          <div>
            <el-input
              v-model="filterDoctor.id"
              placeholder="医生编号"
              suffix-icon="el-icon-search"
            >
            </el-input>
          </div>
          <div>
            <el-input
              v-model="filterDoctor.clinicName"
              placeholder="诊所名称"
              suffix-icon="el-icon-search"
            >
            </el-input>
          </div>
          <div>
            <el-select
              v-model="filterDoctor.professional"
              placeholder="医生背景"
            >
              <el-option
                v-for="item in professionalList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div>
            <el-select
              v-model="provicncData"
              placeholder="诊所省份"
              @change="provinceChange"
            >
              <el-option
                v-for="item in provinceArr"
                :key="item.areaId"
                :label="item.name"
                :value="JSON.stringify(item)"
              >
              </el-option>
            </el-select>
          </div>
          <div>
            <el-select
              v-model="filterDoctor.clinicCityCode"
              placeholder="诊所城市"
            >
              <el-option
                v-for="item in cityArr"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              >
              </el-option>
            </el-select>
          </div>
          <div>
            <el-select v-model="value" placeholder="合作状态">
              <el-option
                v-for="item in stateList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </div>
      </div>
      <div style="background: #f1f2f6; padding: 7px; border-radius: 50%">
        <i class="el-icon-arrow-down" style="color: #999999"></i>
      </div>
    </div>

    <!-- 分割线 -->
    <el-divider></el-divider>
    <!-- 表格上方按钮 -->
    <div class="flexLeft">
      <div>
        <el-button
          type="primary"
          round
          @click="getDoctorList()"
        >搜索</el-button>
      </div>
      <div style="padding: 0 18px">
        <el-button
          style="background: #2ec9c7; color: #ffffff; border: none"
          round
          @click="exportDataFun"
        >导出</el-button>
      </div>
      <div><el-button round style="color: #999999">列</el-button></div>
    </div>
    <!-- 表格 -->
    <div style="padding: 20px 0">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column label="医生编号" width="120">
          <template slot-scope="scope">{{ scope.row.id }}</template>
        </el-table-column>
        <el-table-column prop="doctorName" label="医生姓名" width="120">
        </el-table-column>
        <el-table-column label="诊所名称" width="200" show-overflow-tooltip>
          <template slot-scope="scope">{{ scope.row.clinicNames[1] }}</template>
        </el-table-column>
        <el-table-column label="所属区域" width="120">
          <template slot-scope="scope">{{ scope.row.doctorName }}</template>
        </el-table-column>

        <el-table-column
          prop="address"
          label="医生性别"
          width="100"
          show-overflow-tooltip
        >
          <template slot-scope="scope">{{
            scope.row.gender == 1 ? "男" : "女"
          }}</template>
        </el-table-column>
        <el-table-column label="医生标签" width="120">
          <template slot-scope="scope">
            <span v-for="(item, index) in scope.row.tags" :key="index">{{
              item
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="typeCode" label="医生职称" width="100">
        </el-table-column>
        <el-table-column label="医生背景" width="100">
          <template slot-scope="scope">
            <div v-for="(item, index) in professionalList" :key="index">
              <div v-if="scope.row.professional == item.id">
                {{ item.label }}
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="doctorName" label="罗慕认证" width="100">
          <template slot-scope="scope">
            <div v-for="(item, index) in luomu_leavel" :key="index">
              <div v-if="scope.row.level == item.id">{{ item.label }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="practiceYear" label="医生工龄" width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.practiceYear }}年</span>
          </template>
        </el-table-column>
        <el-table-column prop="mobile" label="手机号码" width="100">
        </el-table-column>
        <el-table-column prop="doctorName" label="套餐规则" width="100">
          <template slot-scope="scope">
            <div v-for="(item, index) in productRuleArr" :key="index">
              <div v-if="scope.row.productRuleId == item.id">
                {{ item.value }}
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="doctorName" label="产品规则" width="100">
          <template slot-scope="scope">
            <div v-for="(item, index) in packgeRuleArr" :key="index">
              <div v-if="scope.row.packageRuleId == item.id">
                {{ item.packageName }}
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="patinetTotal" label="医生患者数量" width="100">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="80">
          <template slot-scope="scope">
            <el-button
              round
              style="background: #d8e4f6; color: #508fcc; border: none"
              @click.native.prevent="deleteRow(scope.$index, tableData)"
            >
              <!-- 停用 -->
              {{ scope.row.stat == 0 ? "停用" : "正常" }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="flexRight" style="padding: 50px 0 0 0">
        <el-pagination
          background
          :current-page="filterDoctor.pageIndex + 1"
          :page-size="8"
          layout="prev, pager, next, jumper"
          :total="allPage"
          @current-change="pageChange"
        >
        </el-pagination>
      </div>
    </div>

    <!-- 新增医生 -->
    <el-dialog
      class="operDocterAdminDialog"
      :append-to-body="true"
      :title="titleArr[dialogIndex]"
      :visible.sync="addDoctorDialog"
      :width="dialogIndex == 0 || 1 ? '800px' : '600PX'"
      @close="dialogClose"
    >
      <addDotor
        v-if="dialogIndex == 0"
        ref="addDotor"
        :doctor-professional="professionalList"
        :gender-list="genderList"
        :luomu-leavel="luomu_leavel"
      ></addDotor>
      <addDotor
        v-if="dialogIndex == 1"
        ref="editDoctor"
        :edit="true"
        :doctor-id="tableSelectArr[0].id"
        :doctor-professional="professionalList"
        :gender-list="genderList"
        :luomu-leavel="luomu_leavel"
      ></addDotor>
      <editRule v-if="dialogIndex == 2" ref="editRule"></editRule>
      <resetPsw v-if="dialogIndex == 3"></resetPsw>
      <exportDoctor v-if="dialogIndex == 4"></exportDoctor>
      <setTag
        v-if="dialogIndex == 5"
        :tags="tableSelectArr[0].tags"
        @setTageFun="setTageFun"
      ></setTag>
      <deletDoctor
        v-if="dialogIndex == 6"
        :doctor-mation="tableSelectArr[0]"
      ></deletDoctor>
      <el-divider></el-divider>
      <div class="flexRight">
        <div>
          <span slot="footer" class="dialog-footer">
            <el-button
              class="dialogBtn"
              round
              @click="
                addDoctorDialog = false;
                dialogIndex = -1;
              "
            >取消</el-button>
          </span>
          <span slot="footer" class="dialog-footer">
            <el-button
              type="primary"
              class="dialogBtn"
              round
              @click="dialogSure"
            >保存</el-button>
          </span>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import addDotor from './components/addDoctor';
import editRule from './components/editRule';
import resetPsw from './components/resetPasw';
import deletDoctor from './components/deletDoctor';
import exportDoctor from './components/exportDoctor';
import setTag from './components/setTag';
// 引入请求
import { getList, editDoctor, getPackgeRule } from '@/api/operDocterAdmin';
// import { getList, exportData } from '@/api/operDocterAdmin';
// 获取地区
import { saleArea } from '@/api/order.js';
// 获取字典
import { getDictMap } from '@/api/system/dictDetail';
// 引入重置密码
import { resetPswPost } from '@/api/login.js';
export default {
  components: {
    addDotor,
    editRule,
    resetPsw,
    exportDoctor,
    deletDoctor,
    setTag
  },
  data() {
    return {
      value: '',
      value1: '',
      options: [{ value: '6', label: '6' }],
      input1: '',
      // 筛选参数
      filterDoctor: {
        gender: '',
        doctorName: '',
        filterDoctor: '',
        clinicName: '',
        id: '',
        professional: '',
        level: '',
        clinicCityCode: '',
        clinicProCode: '',
        pageSize: 8,
        pageIndex: 0
      },
      stateList: [],
      // 医生背景下拉
      professionalList: [{ label: '' }],
      // 罗慕认证字典
      luomu_leavel: [],
      // 省份参数
      provinceArr: [],
      // 产品规则字典参数
      productRuleArr: [],
      // 套餐规则字典参数
      packgeRuleArr: [],
      cityArr: [],
      provicncData: null,
      genderList: ['男', '女'],
      titleArr: [
        '新增医生',
        '编辑医生',
        '规则配置',
        '重置密码',
        '导出医生',
        '设置标签',
        '删除医生'
      ],
      dialogIndex: -1,
      addDoctorDialog: false,
      tableData: [
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          clinicNames: [],
          level: 0,
          professional: 0
        }
      ],
      // 表格已选中列表
      tableSelectArr: [],
      // 修改医生发送参数
      updateDoctorMsg: { id: '', doctorName: '' },
      // 总页数
      allPage: 0
    };
  },
  watch: {
    addDoctorDialog: function(newState) {
      if (!newState) {
        this.dialogIndex = -1;
      }
    }
  },
  mounted() {
    // 查询性别字典
    getDictMap('gender').then((e) => {
      this.genderList = e.gender;
      console.log(e);
    });

    // 医生背景
    getDictMap('doctor_professional').then((e) => {
      this.professionalList = e.doctor_professional;
    });
    // 罗慕认证字典
    getDictMap('doctor_luomu_level').then((e) => {
      this.luomu_leavel = e.doctor_luomu_level;
    });
    // 合作状态
    getDictMap('docotr_stat').then((e) => {
      this.stateList = e.docotr_stat;
    });
    // 产品规则
    getDictMap('package_rule').then((e) => {
      // this.genderList = e.gender;
      this.productRuleArr = e.package_rule;
    });
    // 查询套餐规则
    getPackgeRule().then((e) => {
      this.packgeRuleArr = e;
    });
    // 获取地区信息
    this.getAreaMation();
    // 获取列表
    this.getDoctorList();
  },
  methods: {
    // 关闭弹窗
    closeDialog() {
      this.addDoctorDialog = false;
      this.dialogIndex = -1;
    },
    // 翻页改变事件
    pageChange(e) {
      this.filterDoctor.pageIndex = e - 1;
      this.getDoctorList();
    },
    // 弹窗确定按钮事件
    dialogSure() {
      switch (this.dialogIndex) {
        case 0:
          this.$refs.addDotor.addDoctor();
          break;
        case 1:
          this.$refs.editDoctor.EditDoctorFun();
          break;
        case 2:
          this.tableSelectArr[0].packageRuleId = this.$refs.editRule.packgeValue;
          this.tableSelectArr[0].proRuleId = this.$refs.editRule.productValue;
          this.updateDoctor();
          break;
        case 3:
          resetPswPost(this.tableSelectArr[0].id);
          break;
        case 4:
          this.exportDataFun();
          break;
        case 5:
          this.updateDoctor();
          break;
        case 6:
          this.updateDoctorMsg.stat = 0;
          this.updateDoctor();
          break;
      }
    },
    // 显示弹框
    disDialog(e) {
      if (
        (e >= 1 && e <= 6) &&
        this.tableSelectArr.length > 1
      ) {
        this.$message({
          showClose: true,
          message: '只能选择一条',
          type: 'warning'
        });
      } else if (
        (e >= 1 && e <= 6) &&
        this.tableSelectArr.length === 0
      ) {
        this.$message({
          showClose: true,
          message: '请选择一位医生',
          type: 'warning'
        });
      } else {
        this.dialogIndex = e;
        this.addDoctorDialog = true;
      }
    },
    // 关闭弹框回调
    dialogClose() {
      this.dialogIndex = -1;
    },
    // 获取列表
    getDoctorList() {
      const sendObj = JSON.parse(JSON.stringify(this.filterDoctor));
      getList(sendObj).then((e) => {
        this.tableData = e.content;
        this.allPage = e.totalElements;
        console.log(e);
      });
    },
    // 表格选中回调
    handleSelectionChange(val) {
      console.log(val);
      this.tableSelectArr = val;
    },
    // 获取地区信息
    getAreaMation(re = { parentAreaId: -1, sonlevel: 1 }) {
      saleArea(re).then((e) => {
        if (re.sonlevel === 1) {
          this.provinceArr = e;
        } else {
          this.cityArr = e;
        }
      });
    },
    // 省份选择变化事件
    provinceChange(e) {
      e = JSON.parse(e);
      // 变化是查询当前省下的市区
      this.getAreaMation({ parentAreaId: e.areaId, sonlevel: 2 });
      this.filterDoctor.clinicProCode = e.code;
    },
    // 导出数据
    exportDataFun() {
      const link = document.createElement('a');
      link.style.display = 'none';
      link.href = process.env.VUE_APP_AID_API + '/doctor/download';
      document.body.appendChild(link);
      link.click();
    },
    // 更新医生信息方法
    updateDoctor(e, meth) {
      // this.updateDoctorMsg.id = this.tableSelectArr[0].id;
      // this.updateDoctorMsg.doctorName = this.tableSelectArr[0].doctorName;
      // editDoctor(this.updateDoctorMsg).then((re) => {
      //   console.log(re);
      // });
      // 改变停用方法
      if (meth === 'changeStat') {
        var sendMsg = { ...e };
        // e.stat=(e.stat==0?1:0)
        sendMsg.stat = 6;
      }
      console.log(sendMsg);
      console.log(this.tableData);
      editDoctor(e ? sendMsg : this.tableSelectArr[0]).then((re) => {
        console.log(re);
        this.this.getDoctorList();
      });
    },
    // 设置标签传递方法
    setTageFun(e) {
      console.log(e);
      this.updateDoctorMsg.tags = e;
    },
    // 表格停用方法
    deleteRow(index, data) {
      // data[0].stat=(data[0].stat==0?1:0)
      this.updateDoctor(data[0], 'changeStat');
    }
  }
};
</script>

<style  lang='scss'>
// 小按钮
.dialogBtn {
  padding: 6px 28px !important;
}
.addDoctorTitle {
  font-size: 16px;
  color: #333333;
  font-weight: 600;
  border-left: 3px solid #508fcc;
  padding: 0 0 0 6px;
}
// 浅色按钮
.lightBtn {
  background: #2ec9c7;
  color: #ffffff;
  border: none;
}
.flexLeft {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.flexRight {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.flexSpace {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.flexCenter {
  display: flex;
  justify-content: center;
  align-items: center;
}
.operDocterAdminDialog {
  // 弹框样式
  .el-dialog__title {
    color: #ffffff;
  }
  .el-dialog__headerbtn,
  .el-dialog__close {
    color: #ffffff;
  }
}

.operDocterAdmin {
  // 表格
  > div:nth-child(1) {
    div:not(:nth-child(1)) {
      padding: 0 10px;
    }
  }
  // 表单
  > div:nth-child(2) {
    padding: 30px 0;

    > div:nth-child(1) {
      width: 80%;
      > div:nth-child(1) {
        padding: 0 0 20px 0;
      }
      > div {
        > div:not(:nth-child(1)) {
          padding: 0 5px;
        }
        > div {
          flex: 1;

          > div {
            width: 100%;
          }
        }
      }
    }
  }
}
</style>
